<template>
  <div class="container">
    <div class="table-data">
      <h1 class="title">用户列表</h1>
      <el-card class="box-card">
        <el-row
          style="
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <el-col :span="10">
            <!-- 新增 -->
            <el-button type="primary" icon="el-icon-plus" size="small"
              >新增</el-button
            >
            <!-- 刷新 -->
            <el-button
              type="warning"
              icon="el-icon-circle-close"
              size="small"
              @click="banBatches"
              >禁用/启用</el-button
            >

            <!-- 删除 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="delBatches"
              >删除</el-button
            >
          </el-col>

          <el-col :span="4" :offset="10"> </el-col>
        </el-row>

        <el-table
          :data="dataShow"
          stripe
          border
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="nick_name" label="昵称"></el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              {{ scope.row.sex == 3 ? "男" : "女" }}
            </template>
          </el-table-column>
         
          <el-table-column
            prop="create_time"
            label="创建时间"
          ></el-table-column>
          <el-table-column
            prop="last_login_time"
            label="最后登录时间"
          ></el-table-column>
          <el-table-column prop="status" label="用户状态">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? "可用" : "禁用" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220px">
            <template slot-scope="scope">
              <el-button
                type="warning"
                icon="el-icon-circle-close"
                @click="userban(scope.row.user_id, oriindex)"
                size="mini"
                >{{ scope.row.status == 1 ? "禁用" : "启用" }}</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="userdel(scope.row.user_id, oriindex)"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oriindex: "",
      dataShow: [],
      checkedrow: [],
      total: 1,
      currentPage: 1,
      page: 1,
      pageSize: 10,
     
    };
  },
  methods: {
    //批量删除
    delBatches() {
      this.checkedrow.forEach((item, index) => {
        this.userdel(item.admin_id, index);
      });
    },
    //批量禁用
    banBatches() {
      this.checkedrow.forEach((item, index) => {
        this.userban(item.admin_id, index);
      });
    },
    //禁用
    userban(e, index) {
      console.log(e);
      this.$http
        .post("/api/admin/userAccountBan", {
          token: this.token,
          id: e,
        })
        .then((res) => {
          console.log(res);
          let type = "success";
          if (res.data.code == 2001) {
            type = "warning";
          }
          if (index == "" || index == dataShow.lenght) {
            this.$message({ message: res.data.msg, type: type });
          }
          this.show(this.pageSize, this.page);
        });
    },
    //删除
    userdel(e, index, i) {
      console.log("删除");
      this.$http
        .post("/api/admin/userAccountDelete", {
          token: this.token,
          id: e,
        })
        .then((res) => {
          console.log(res);
          let type = "success";
          if (res.data.code == 2001) {
            type = "warning";
          }
          if (index == "" || index == dataShow.lenght) {
            this.$message({ message: res.data.msg, type: type });
          }
          // 获取用户列表
          this.$http
            .post("/api/admin/userList", {
              token: this.token,
              size: this.pageSize,
              page: this.page,
            })
            .then((res) => {
              console.log(res);
              // 判断是否为空
              if (res.data.data.data == "") {
                this.page -= 1;
              }
              this.show(this.pageSize, this.page);
            });

          // 判断提示
          if (index == "" || index == dataShow.lenght) {
            this.$message({ message: res.data.msg, type: type });
          }
        });
    },
    //每页显示条数
    handleSizeChange(e) {
      this.pageSize = e;
      this.show(e, 1);
    },
    //当前页变化
    handleCurrentChange(e) {
      // 多选
      this.page = e;
      this.show(this.pageSize, e);
    },
    handleSelectionChange(e) {
      //   console.log(e);
      this.checkedrow = e;
      //   console.log(this.checkedrow)
    },

    show(size, page) {
      let that = this;
      this.$http
        .post("/api/admin/userList", {
          token: this.token,
          size: size,
          page: page,
        })
        .then((res) => {
          console.log(res);
          this.dataShow = res.data.data.data;
          this.total = res.data.data.count;
          this.dataShow.forEach((item, index) => {
            that.dataShow[index].create_time = new Date(
              parseInt(item.create_time) * 1000
            )
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ");
            that.dataShow[index].last_login_time = new Date(
              parseInt(item.last_login_time) * 1000
            )
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ");
            // console.log( item.create_time);
          });
        });
    },
  },
  mounted() {
    //加载用户列表
    this.token = sessionStorage.getItem("token");
    this.show(10, 1);
  },
};
</script>

<style lang="less" scoped>
/deep/.el-table__body-wrapper {
  font-size: 13px;
}
.container {
  min-height: 850px;
  background: #f6f6f6;
  padding-top: 20px;

  .table-data {
    padding: 0 20px;
  }

  .nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-form-item__label {
    width: 80px !important;
  }
  /deep/.el-input {
    width: 98%;
  }
}
.title {
  padding: 0;
  margin: 0;
  margin: 20px 0;
  text-align: center;
}


</style>